<template>
	<view class="content">
		<u-navbar title="填写订单" :placeholder='true' height="88rpx" leftIconColor="#fff"
			titleStyle='color:#fff;font-size:32rpx' left-icon-size="32rpx" bg-color="#FF594D" :autoBack="true">
		</u-navbar>

		<view class="address_bar" v-if="bookList.length!=0">
			<view class="address_item"
				@click="navigateTo('/pages_mine/pages/address-administration/address-administration?select=1')">
				<view class="address_left">
					<view class="name">{{addrss.consignee}}</view>
					<view class="default_address" v-if='addrss.isDefault==1'>默认地址</view>
				</view>
				<view class="address_center">
					<view class="address_tel">
						{{addrss.phone}}
					</view>
					<view class="address_text">
						{{addrss.provinceName+addrss.cityName+addrss.districtName+addrss.detail}}
					</view>
				</view>
				<view class="address_right">
					<u-icon name="arrow-right" color="#777777" size="12px"></u-icon>
				</view>
			</view>
		</view>
		<view class="address_bar" v-else @click="navigateTo('/pages_mine/pages/add-address/add-address?add=1')">
			<view class="address_item">
				<view class="address_center	not_adress">
					你还没填写地址，请填写地址
				</view>
				<view class="address_right">
					<u-icon name="arrow-right" color="#777777" size="12px"></u-icon>
				</view>
			</view>
		</view>
		<view class="order_type">
			<u-radio-group activeColor="#F44236" v-model="orderType" placement="column" @change="groupChange">
				<view class="order_content">
					<template v-for="(item, index) in radiolist1">
						<view class="radio_item">
							<u-radio :customStyle="{marginBottom: '0'}" size='40rpx' iconSize="26rpx" labelSize='30rpx' :key="index"
								:label="item.label" :name="item.name">
							</u-radio>
						</view>
					</template>
				</view>
			</u-radio-group>
		</view>
		<view class="discount_coupon">
			<view class="discount_left">
				优惠券
			</view>
			<view class="discount_num" @click="navigateTo('/pages_mine/pages/mine-coupon/mine-coupon?select=1')">
				{{arr.length!=0?coupon.name:' '}}&nbsp;&nbsp;&nbsp; {{couponTotal}}张
			</view>
			<view class="discount_right">
				<u-icon name="arrow-right" color="#777777" size="12px"></u-icon>
			</view>
		</view>
		<view class="goods_total">
			<view class="total_list">

				<view class="goods_item">
					<view class="goods_num">
						<view class="goods_img">
							<image :src="goodsInfo.image" mode=""></image>
						</view>
						<view class="goods_detail">
							<view class="goods_title">
								{{goodsInfo.commodityName}}
								<view class="specification">
									{{goodsInfo.list[0].specificationName}}
								</view>
							</view>
							<view class="good_price">
								<view class="price">
									￥{{goodsInfo.list[0].specificationPrice}}
								</view>
								<view class="num">
									X{{goods_num}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="money">
				<view class="">
					商品合计
				</view>
				<view class="">
					￥{{arr.length!=0?((goodsInfo.list[0].specificationPrice*goods_num)-coupon.maxDiscountAmount).toFixed(2):(goodsInfo.list[0].specificationPrice*goods_num).toFixed(2)}}元
				</view>
			</view>
			<view class="money">
				<view class="">
					运费
				</view>
				<view class="">
					￥{{orderType!=2?goodsInfo.list[0].priceFreight:0}}元
				</view>
			</view>
		</view>
		<view class="payment">
			<view class="payment_price">
				需要支付：
				<view class="price">
					{{totalAmount.toFixed(2)}}
					<!-- ￥{{arr.length!=0?((goodsInfo.list[0].specificationPrice*goods_num)-coupon.maxDiscountAmount+goodsInfo.list[0].priceFreight).toFixed(2):(goodsInfo.list[0].specificationPrice*goods_num+goodsInfo.list[0].priceFreight).toFixed(2)}}元 -->
					<!-- ￥{{(goodsInfo.list[0].specificationPrice*goods_num).toFixed(2)}}元 -->
				</view>
			</view>
			<button @click="payment">去付款</button>
		</view>

	</view>
</template>

<script>
	import {
		getCommodityInfo
	} from '../../../api/index.js'
	import {
		getBookl,
		getBook
	} from '../../../api/book.js'
	import {
		getUserCouponList,
		getCouponInfo,
		placeAnOrder
	} from '../../../api/mine.js'
	export default {
		onLoad(option) {
			// console.log(option);
			this.goods_num = option.number
			this.getCommodityInfoData(option.id)
			if (option.employeeId) {
				this.employeeId = option.employeeId
			}
			if (option.buyNumber != null) {
				this.buyNumber = option.buyNumber
			} else {
				this.buyNumber = null
			}
		},
		onShow() {
			this.getBooklData({
				userId: this.$store.getters.getUserInfo.id
			})
			this.getCouponListData()
			setTimeout(async () => {
				if (this.$store.state.addressId != 0) {
					const res = await getBook(this.$store.state.addressId)
					this.addrss = res.data
					console.log(this.addrss);
				}
			}, 100)
		},
		data() {
			return {
				titleStyle: {
					color: '#fff',
				},
				buyNumber: null,
				bookList: [],
				employeeId: '',
				addrss: {
					consignee: '111', // 收货人姓名
					phone: '', // 手机号
					provinceName: "", // 省级名称
					cityName: "", // 市级名称
					districtName: "", // 区级名称
					isDefault: 0, // 是否默认
					detail: '', // 详细地址
					sex: '男', // 性别
				},
				goodsInfo: {
					list: [' ']
				},
				goods_num: 0,
				couponTotal: 0,
				coupon: {},
				arr: [],
				shopCar: 0, //是否购物车下单
				radiolist1: [{
						name: '1',
						label: '送货上门',
						disabled: false
					},
					{
						name: '2',
						label: '到店自提',
						disabled: false
					},
					{
						name: '3',
						label: '快递到家',
						disabled: false
					}
				],
				orderType: '1'
			}
		},
		created() {
			this.getBooklData({
				userId: this.$store.getters.getUserInfo.id
			})
			this.getCouponListData()
		},
		watch: {
			coupon: {
				deep: true,
				handler() {
					// console.log();
					this.arr = Object.keys(this.coupon);
					// console.log(this.arr.length == 0); //true
				}
			}
		},
		computed: {
			totalAmount() {
				if (this.arr.length != 0) {
					if (this.orderType == '2') {
						return this.goodsInfo.list[0].specificationPrice * this.goods_num - this.coupon.maxDiscountAmount
					}
					return ((this.goodsInfo.list[0].specificationPrice * this.goods_num) - this.coupon.maxDiscountAmount + this
						.goodsInfo.list[0].priceFreight)
				} else {
					if (this.orderType == '2') {
						return ((this.goodsInfo.list[0].specificationPrice * this.goods_num))
					}
					return (this.goodsInfo.list[0].specificationPrice * this.goods_num + this.goodsInfo.list[0].priceFreight)
				}
			}
		},
		methods: {
			groupChange(n) {
				console.log('groupChange', n);
				console.log(this.orderType);
			},
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			},
			async payment() {
				// console.log(this.goodsInfo.id);

				// console.log(this.addrss.id);
				try {
					console.log(this.addrss.id);
				} catch (e) {
					uni.showToast({
						title: '请添加地址',
						icon: 'error'
					})
					return
				}

				const order = {
					userId: this.$store.state.userInfo.id, //用户id
					addressBookId: this.addrss.id, // 地址id
					orderType: this.orderType - 0, // 1送货、2自取、3快递
					mode: this.goodsInfo.commodityType, // 商品类型
					commodityId: this.goodsInfo.id, // 商品id
					placeStatus: 1, // 下单状态   
					buyNumber: this.buyNumber,
					couponIds: this.coupon.id ?? null, // 优惠券
					priceFreight: this.goodsInfo.list[0].priceFreight, // 商品运费
					discountAmount: this.coupon.maxDiscountAmount, // 优惠金额
					totalAmount: this.coupon.maxDiscountAmount ? this.totalAmount + this.coupon.maxDiscountAmount : this
						.totalAmount, // 订单总金额
					amount: this.totalAmount,
					orderDetails: [{
						...this.goodsInfo.list[0],
						xxx: null,
						name: this.goodsInfo.commodityName,
						image: this.goodsInfo.image,
						specificationId: this.goodsInfo.list[0].id,
						specificationNumber: this.goods_num,
						// specificationPrice: this.goodsInfo.list[0].specificationPrice,
						specificationAmount: this.goodsInfo.list[0].specificationPrice
					}]
				}
				console.log(order);
				const res = await placeAnOrder(order)
				console.log(res);
				if (res.code != 200) {
					uni.showToast({
						title: res.msg,
						icon: 'error'
					})
					return
				}
				if (this.employeeId) {
					uni.setStorageSync(`order${res.data.id}`, this.employeeId)
					uni.navigateTo({
						url: `/pages_goods/user-payment/user-payment?orderId=${res.data.id}&employeeId=${this.employeeId}`,
					})
					return
				}
				uni.navigateTo({
					url: `/pages_goods/user-payment/user-payment?orderId=${res.data.id}`,
				})
			},
			// 获取单个商品信息
			async getCommodityInfoData(id) {
				const res = await getCommodityInfo(id)
				this.goodsInfo = res.data
			},
			// 获取地址列表 
			async getBooklData(data) {
				const res = await getBookl(data)
				// console.log(res);
				this.bookList = res.rows
				this.addrss = this.bookList.filter(item => {
					if (item.isDefault == 1) {
						// console.log(1);
						return item
					}
				})[0]
				if (!this.addrss) {
					this.addrss = this.bookList[0]
				}
			},
			async getCouponListData() {
				const res = await getUserCouponList()
				// console.log(res);
				this.couponTotal = res.total

				this.coupon = res.rows.filter(item => {
					if (item.id == this.$store.state.couponId) {
						return item
					}
				})[0] ?? {}
				if (this.coupon.thresholdAmount > this.totalAmount) {
					uni.showToast({
						title: '优惠券未达到使用条件',
						icon: 'error',
						success() {}
					})
					this.coupon = {}
				}
				// console.log(this.coupon);
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		min-height: 100vh;
		padding-bottom: 100rpx;

		.address_item {
			display: flex;
			align-items: center;
			width: 750rpx;
			height: 158rpx;
			background-color: #fff;
			margin: 20rpx 0;
			box-sizing: border-box;
			padding: 0 0 0 30rpx;

			.address_left {
				color: #333332;
				font-size: 32rpx;
				width: 140rpx;

				.default_address {
					margin-top: 24rpx;
					width: 92rpx;
					height: 33rpx;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					border: 1rpx solid #FF594D;
					font-size: 18rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #FF594D;
					text-align: center;
					line-height: 33rpx;
				}
			}

			.address_center {
				width: 530rpx;
				height: 100%;

				&.not_adress {
					width: 670rpx;
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #777777;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.address_tel {
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #333332;
					padding-top: 35rpx;
				}

				.address_text {
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #777777;
					margin-top: 32rpx;
				}
			}
		}

		.order_type {
			width: 750rpx;
			height: 90rpx;
			background-color: #fff;
			margin-bottom: 20rpx;

			.order_content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 90rpx;
				padding: 0 40rpx;
			}
		}

		.discount_coupon {
			width: 750rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			padding-left: 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.discount_left {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333332;
				width: 335rpx;
				margin-right: 37rpx;
			}

			.discount_num {
				width: 302rpx;
				height: 36rpx;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #777777;
				text-align: right;
				box-sizing: border-box;
				padding-right: 5rpx;
			}
		}

		.goods_total {
			width: 750rpx;
			// height: 388rpx;
			background: #FFFFFF;
			padding: 20rpx;
			box-sizing: border-box;

			.goods_item {
				margin-bottom: 20rpx;

				.goods_num {
					display: flex;

					.goods_img {
						width: 200rpx;
						height: 200rpx;

						image {
							width: 100%;
							height: 100%;
						}

					}

					.goods_detail {
						padding: 30rpx 0;
						margin-left: 20rpx;
						// width: 396rpx;
						flex: 1;
					}

					.goods_title {
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 800;
						height: 106rpx;
						color: #333332;
					}

					.good_price {
						font-size: 24rpx;
						display: flex;
						justify-content: space-between;
						color: #F44236;

						.num {
							color: #777;
						}
					}

					.specification {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #777777;
					}
				}

			}

			.money {
				display: flex;
				width: 100%;
				height: 74rpx;
				align-items: center;
				justify-content: space-between;
				border-top: 1rpx solid rgba(170, 170, 170, 0.3);
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #777777;
			}
		}

		.payment {
			width: 750rpx;
			height: 160rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 0 27rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;

			.payment_price {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #F44236;

				.price {
					font-size: 30rpx;
				}
			}

			button {
				width: 346rpx;
				height: 78rpx;
				background: #FF594D;
				border-radius: 67rpx 67rpx 67rpx 67rpx;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 78rpx;
				margin: 0;
			}
		}
	}
</style>